<template>
  <div class="content">
    <el-form :inline="true" :model="queryForm" class="form-inline">
      <el-form-item label="名称">
        <el-input v-model="queryForm.name" placeholder="请输入名称" clearable />
      </el-form-item>
 

      <el-form-item>
        <el-button type="primary" @click="loadCourseList">查询</el-button>
      </el-form-item>
    </el-form>
  

    <el-table :data="courseList" stripe>
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="description" label="描述" />

      <el-table-column label="图片">
        <template #default="scope">
          <el-image style="height: 23px; border: none; cursor: pointer;vertical-align: top"
              :src="scope.row.photo"
          />
        </template>
      </el-table-column>

      <el-table-column prop="serviceCrowd" label="人群" width="100"/>
      <el-table-column prop="preparedSkill" label="技能要求" width="100"/>
      <el-table-column prop="goal" label="目标" width="100"/>
  

      <el-table-column label="操作" >
        <template #default="scope">
          <el-button size="small" style="margin-left: 2px;" @click="handleSaveCourse(scope.row.id)">详情</el-button>
        </template>
      </el-table-column>

    </el-table>

    <div style="margin-top: 10px;">
      <el-pagination
          :page-sizes="[10, 20, 30, 40]"
          :page-size="queryForm.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
      />
    </div>
  </div>

</template>

<script setup lang="ts">
import { reactive, ref} from "vue"; 
import {getCourseList} from  "@/api/course"
 
const queryForm=reactive({name:null,page:1,pageSize:10});

let courseList=reactive([]);
  
let total=ref(0);
 
//定义方法
let loadCourseList=()=>{
  //准备数据
  getCourseList(queryForm).then((resp)=>{
    courseList.length = 0;
    courseList.push(... resp.data);

    total.value=resp.total;
  });
}

let handleSizeChange=(pageSize)=>{
  queryForm.pageSize = pageSize;
  loadCourseList()
}

let handlePageChange=(page)=>{
  queryForm.page = page;
  loadCourseList();
}

loadCourseList();
</script>

<style scoped>
</style>

<style>
.form-inline .el-select {
  --el-select-width: 220px;
}
</style>
